
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont i-my-resume"></i>
                    <div class="name">my-resume</div>
                    <div class="fontclass">.i-my-resume</div>
                </li>
            
                <li>
                <i class="icon iconfont i-my-credits"></i>
                    <div class="name">my-credits</div>
                    <div class="fontclass">.i-my-credits</div>
                </li>
            
                <li>
                <i class="icon iconfont i-live-unstart"></i>
                    <div class="name">live-unstart</div>
                    <div class="fontclass">.i-live-unstart</div>
                </li>
            
                <li>
                <i class="icon iconfont i-resource-library"></i>
                    <div class="name">resource-library</div>
                    <div class="fontclass">.i-resource-library</div>
                </li>
            
                <li>
                <i class="icon iconfont i-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.i-search</div>
                </li>
            
                <li>
                <i class="icon iconfont i-my-circle"></i>
                    <div class="name">my-circle</div>
                    <div class="fontclass">.i-my-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-down"></i>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">.i-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-study-detail"></i>
                    <div class="name">study-detail</div>
                    <div class="fontclass">.i-study-detail</div>
                </li>
            
                <li>
                <i class="icon iconfont i-transfer-of-course"></i>
                    <div class="name">transfer-of-course</div>
                    <div class="fontclass">.i-transfer-of-course</div>
                </li>
            
                <li>
                <i class="icon iconfont i-trading-center"></i>
                    <div class="name">trading-center</div>
                    <div class="fontclass">.i-trading-center</div>
                </li>
            
                <li>
                <i class="icon iconfont i-assess"></i>
                    <div class="name">assess</div>
                    <div class="fontclass">.i-assess</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course"></i>
                    <div class="name">course</div>
                    <div class="fontclass">.i-course</div>
                </li>
            
                <li>
                <i class="icon iconfont i-set"></i>
                    <div class="name">set</div>
                    <div class="fontclass">.i-set</div>
                </li>
            
                <li>
                <i class="icon iconfont i-conversation"></i>
                    <div class="name">conversation</div>
                    <div class="fontclass">.i-conversation</div>
                </li>
            
                <li>
                <i class="icon iconfont i-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.i-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course-certification"></i>
                    <div class="name">course-certification</div>
                    <div class="fontclass">.i-course-certification</div>
                </li>
            
                <li>
                <i class="icon iconfont i-jod-management"></i>
                    <div class="name">jod-management</div>
                    <div class="fontclass">.i-jod-management</div>
                </li>
            
                <li>
                <i class="icon iconfont i-learning-sitution"></i>
                    <div class="name">learning-sitution</div>
                    <div class="fontclass">.i-learning-sitution</div>
                </li>
            
                <li>
                <i class="icon iconfont i-live-living"></i>
                    <div class="name">live-living</div>
                    <div class="fontclass">.i-live-living</div>
                </li>
            
                <li>
                <i class="icon iconfont i-guidance-center"></i>
                    <div class="name">guidance-center</div>
                    <div class="fontclass">.i-guidance-center</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course-add"></i>
                    <div class="name">course-add</div>
                    <div class="fontclass">.i-course-add</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course-off"></i>
                    <div class="name">course-off</div>
                    <div class="fontclass">.i-course-off</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course-publish"></i>
                    <div class="name">course-publish</div>
                    <div class="fontclass">.i-course-publish</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-right"></i>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">.i-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont i-detail"></i>
                    <div class="name">detail</div>
                    <div class="fontclass">.i-detail</div>
                </li>
            
                <li>
                <i class="icon iconfont i-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.i-close</div>
                </li>
            
                <li>
                <i class="icon iconfont i-registration-managem"></i>
                    <div class="name">registration-managem</div>
                    <div class="fontclass">.i-registration-managem</div>
                </li>
            
                <li>
                <i class="icon iconfont i-recycle"></i>
                    <div class="name">recycle</div>
                    <div class="fontclass">.i-recycle</div>
                </li>
            
                <li>
                <i class="icon iconfont i-quit-aids"></i>
                    <div class="name">quit-aids</div>
                    <div class="fontclass">.i-quit-aids</div>
                </li>
            
                <li>
                <i class="icon iconfont i-tips"></i>
                    <div class="name">tips</div>
                    <div class="fontclass">.i-tips</div>
                </li>
            
                <li>
                <i class="icon iconfont i-feedback"></i>
                    <div class="name">feedback</div>
                    <div class="fontclass">.i-feedback</div>
                </li>
            
                <li>
                <i class="icon iconfont i-determine"></i>
                    <div class="name">determine</div>
                    <div class="fontclass">.i-determine</div>
                </li>
            
                <li>
                <i class="icon iconfont i-top"></i>
                    <div class="name">top</div>
                    <div class="fontclass">.i-top</div>
                </li>
            
                <li>
                <i class="icon iconfont i-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.i-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont i-consult"></i>
                    <div class="name">consult</div>
                    <div class="fontclass">.i-consult</div>
                </li>
            
                <li>
                <i class="icon iconfont i-qr-code"></i>
                    <div class="name">qr-code</div>
                    <div class="fontclass">.i-qr-code</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzmu"></i>
                    <div class="name">college-gzmu</div>
                    <div class="fontclass">.i-college-gzmu</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzpp"></i>
                    <div class="name">college-gzpp</div>
                    <div class="fontclass">.i-college-gzpp</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzcp"></i>
                    <div class="name">college-gzcp</div>
                    <div class="fontclass">.i-college-gzcp</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gziot"></i>
                    <div class="name">college-gziot</div>
                    <div class="fontclass">.i-college-gziot</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gziort"></i>
                    <div class="name">college-gziort</div>
                    <div class="fontclass">.i-college-gziort</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzdx"></i>
                    <div class="name">college-gzdx</div>
                    <div class="fontclass">.i-college-gzdx</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzvcotb"></i>
                    <div class="name">college-gzvcotb</div>
                    <div class="fontclass">.i-college-gzvcotb</div>
                </li>
            
                <li>
                <i class="icon iconfont i-alarm-center"></i>
                    <div class="name">alarm-center</div>
                    <div class="fontclass">.i-alarm-center</div>
                </li>
            
                <li>
                <i class="icon iconfont i-service-situation"></i>
                    <div class="name">service-situation</div>
                    <div class="fontclass">.i-service-situation</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzrtu"></i>
                    <div class="name">college-gzrtu</div>
                    <div class="fontclass">.i-college-gzrtu</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-gzpos"></i>
                    <div class="name">college-gzpos</div>
                    <div class="fontclass">.i-college-gzpos</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-hnbl"></i>
                    <div class="name">college-hnbl</div>
                    <div class="fontclass">.i-college-hnbl</div>
                </li>
            
                <li>
                <i class="icon iconfont i-college-albb"></i>
                    <div class="name">college-albb</div>
                    <div class="fontclass">.i-college-albb</div>
                </li>
            
                <li>
                <i class="icon iconfont i-common-problem"></i>
                    <div class="name">common-problem</div>
                    <div class="fontclass">.i-common-problem</div>
                </li>
            
                <li>
                <i class="icon iconfont i-common-problem-down"></i>
                    <div class="name">common-problem-down</div>
                    <div class="fontclass">.i-common-problem-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-conversation-down"></i>
                    <div class="name">conversation-down</div>
                    <div class="fontclass">.i-conversation-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-make-complaints"></i>
                    <div class="name">make-complaints</div>
                    <div class="fontclass">.i-make-complaints</div>
                </li>
            
                <li>
                <i class="icon iconfont i-Find-teachers"></i>
                    <div class="name">find-teachers</div>
                    <div class="fontclass">.i-Find-teachers</div>
                </li>
            
                <li>
                <i class="icon iconfont i-Find-teachers-down"></i>
                    <div class="name">find-teachers-down</div>
                    <div class="fontclass">.i-Find-teachers-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-eyeprotectionmode"></i>
                    <div class="name">eye-protection-mode</div>
                    <div class="fontclass">.i-eyeprotectionmode</div>
                </li>
            
                <li>
                <i class="icon iconfont i-Eyeprotectionmode-"></i>
                    <div class="name">eye-protection-mode-down</div>
                    <div class="fontclass">.i-Eyeprotectionmode-</div>
                </li>
            
                <li>
                <i class="icon iconfont i-full-screen"></i>
                    <div class="name">full-screen</div>
                    <div class="fontclass">.i-full-screen</div>
                </li>
            
                <li>
                <i class="icon iconfont i-contents"></i>
                    <div class="name">contents</div>
                    <div class="fontclass">.i-contents</div>
                </li>
            
                <li>
                <i class="icon iconfont i-expression"></i>
                    <div class="name">expression</div>
                    <div class="fontclass">.i-expression</div>
                </li>
            
                <li>
                <i class="icon iconfont i-file"></i>
                    <div class="name">file</div>
                    <div class="fontclass">.i-file</div>
                </li>
            
                <li>
                <i class="icon iconfont i-voice"></i>
                    <div class="name">voice</div>
                    <div class="fontclass">.i-voice</div>
                </li>
            
                <li>
                <i class="icon iconfont i-image"></i>
                    <div class="name">image</div>
                    <div class="fontclass">.i-image</div>
                </li>
            
                <li>
                <i class="icon iconfont i-a"></i>
                    <div class="name">a</div>
                    <div class="fontclass">.i-a</div>
                </li>
            
                <li>
                <i class="icon iconfont i-q"></i>
                    <div class="name">q</div>
                    <div class="fontclass">.i-q</div>
                </li>
            
                <li>
                <i class="icon iconfont i-learning-student"></i>
                    <div class="name">learning-student</div>
                    <div class="fontclass">.i-learning-student</div>
                </li>
            
                <li>
                <i class="icon iconfont i-thumbs-up"></i>
                    <div class="name">thumbs-up</div>
                    <div class="fontclass">.i-thumbs-up</div>
                </li>
            
                <li>
                <i class="icon iconfont i-knowledge-map"></i>
                    <div class="name">knowledge-map</div>
                    <div class="fontclass">.i-knowledge-map</div>
                </li>
            
                <li>
                <i class="icon iconfont i-comment"></i>
                    <div class="name">comment</div>
                    <div class="fontclass">.i-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont i-remarks"></i>
                    <div class="name">remarks</div>
                    <div class="fontclass">.i-remarks</div>
                </li>
            
                <li>
                <i class="icon iconfont i-time"></i>
                    <div class="name">time</div>
                    <div class="fontclass">.i-time</div>
                </li>
            
                <li>
                <i class="icon iconfont i-teacher"></i>
                    <div class="name">teacher</div>
                    <div class="fontclass">.i-teacher</div>
                </li>
            
                <li>
                <i class="icon iconfont i-a-class-circle"></i>
                    <div class="name">a-class-circle</div>
                    <div class="fontclass">.i-a-class-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont i-a-notice"></i>
                    <div class="name">a-notice</div>
                    <div class="fontclass">.i-a-notice</div>
                </li>
            
                <li>
                <i class="icon iconfont i-return"></i>
                    <div class="name">return</div>
                    <div class="fontclass">.i-return</div>
                </li>
            
                <li>
                <i class="icon iconfont i-prepare-lessons"></i>
                    <div class="name">a-prepare-lessons</div>
                    <div class="fontclass">.i-prepare-lessons</div>
                </li>
            
                <li>
                <i class="icon iconfont i-unpass"></i>
                    <div class="name">unpass</div>
                    <div class="fontclass">.i-unpass</div>
                </li>
            
                <li>
                <i class="icon iconfont i-pending"></i>
                    <div class="name">pending</div>
                    <div class="fontclass">.i-pending</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shelved"></i>
                    <div class="name">shelved</div>
                    <div class="fontclass">.i-shelved</div>
                </li>
            
                <li>
                <i class="icon iconfont i-pass"></i>
                    <div class="name">pass</div>
                    <div class="fontclass">.i-pass</div>
                </li>
            
                <li>
                <i class="icon iconfont i-disabled"></i>
                    <div class="name">disabled</div>
                    <div class="fontclass">.i-disabled</div>
                </li>
            
                <li>
                <i class="icon iconfont i-Unfolded"></i>
                    <div class="name">Unfolded</div>
                    <div class="fontclass">.i-Unfolded</div>
                </li>
            
                <li>
                <i class="icon iconfont i-Put-away"></i>
                    <div class="name">Put-away</div>
                    <div class="fontclass">.i-Put-away</div>
                </li>
            
                <li>
                <i class="icon iconfont i-pass1"></i>
                    <div class="name">pass</div>
                    <div class="fontclass">.i-pass1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-live"></i>
                    <div class="name">live</div>
                    <div class="fontclass">.i-live</div>
                </li>
            
                <li>
                <i class="icon iconfont i-coursecontent"></i>
                    <div class="name">course content</div>
                    <div class="fontclass">.i-coursecontent</div>
                </li>
            
                <li>
                <i class="icon iconfont i-courseoverview"></i>
                    <div class="name">course overview</div>
                    <div class="fontclass">.i-courseoverview</div>
                </li>
            
                <li>
                <i class="icon iconfont i-move-down"></i>
                    <div class="name">move-down</div>
                    <div class="fontclass">.i-move-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-move-up"></i>
                    <div class="name">move-up</div>
                    <div class="fontclass">.i-move-up</div>
                </li>
            
                <li>
                <i class="icon iconfont i-certification"></i>
                    <div class="name">certification</div>
                    <div class="fontclass">.i-certification</div>
                </li>
            
                <li>
                <i class="icon iconfont i-makeup"></i>
                    <div class="name">makeup</div>
                    <div class="fontclass">.i-makeup</div>
                </li>
            
                <li>
                <i class="icon iconfont i-correction"></i>
                    <div class="name">mark</div>
                    <div class="fontclass">.i-correction</div>
                </li>
            
                <li>
                <i class="icon iconfont i-release"></i>
                    <div class="name">release</div>
                    <div class="fontclass">.i-release</div>
                </li>
            
                <li>
                <i class="icon iconfont i-makeup_btn"></i>
                    <div class="name">makeup_btn</div>
                    <div class="fontclass">.i-makeup_btn</div>
                </li>
            
                <li>
                <i class="icon iconfont i-pass_btn"></i>
                    <div class="name">unpass_btn</div>
                    <div class="fontclass">.i-pass_btn</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-right1"></i>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">.i-arrow-right1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-left"></i>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">.i-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluation"></i>
                    <div class="name">evaluation</div>
                    <div class="fontclass">.i-evaluation</div>
                </li>
            
                <li>
                <i class="icon iconfont i-deliveryrule"></i>
                    <div class="name">delivery rule</div>
                    <div class="fontclass">.i-deliveryrule</div>
                </li>
            
                <li>
                <i class="icon iconfont i-eliminationreason"></i>
                    <div class="name">elimination reason</div>
                    <div class="fontclass">.i-eliminationreason</div>
                </li>
            
                <li>
                <i class="icon iconfont i-display"></i>
                    <div class="name">display</div>
                    <div class="fontclass">.i-display</div>
                </li>
            
                <li>
                <i class="icon iconfont i-hide"></i>
                    <div class="name">hide</div>
                    <div class="fontclass">.i-hide</div>
                </li>
            
                <li>
                <i class="icon iconfont i-report"></i>
                    <div class="name">report</div>
                    <div class="fontclass">.i-report</div>
                </li>
            
                <li>
                <i class="icon iconfont i-reply"></i>
                    <div class="name">reply</div>
                    <div class="fontclass">.i-reply</div>
                </li>
            
                <li>
                <i class="icon iconfont i-close_"></i>
                    <div class="name">close_02</div>
                    <div class="fontclass">.i-close_</div>
                </li>
            
                <li>
                <i class="icon iconfont i-ziwojieshao"></i>
                    <div class="name">自我介绍</div>
                    <div class="fontclass">.i-ziwojieshao</div>
                </li>
            
                <li>
                <i class="icon iconfont i-qiuzhiyiyuan"></i>
                    <div class="name">求职意愿</div>
                    <div class="fontclass">.i-qiuzhiyiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont i-jiaoyujingli"></i>
                    <div class="name">教育经历</div>
                    <div class="fontclass">.i-jiaoyujingli</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zuopinzhanshi"></i>
                    <div class="name">作品展示</div>
                    <div class="fontclass">.i-zuopinzhanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shixijingli"></i>
                    <div class="name">实习经历</div>
                    <div class="fontclass">.i-shixijingli</div>
                </li>
            
                <li>
                <i class="icon iconfont i-gerenxinxi"></i>
                    <div class="name">个人信息</div>
                    <div class="fontclass">.i-gerenxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zhuanyejineng"></i>
                    <div class="name">专业技能</div>
                    <div class="fontclass">.i-zhuanyejineng</div>
                </li>
            
                <li>
                <i class="icon iconfont i-gongzuojingli"></i>
                    <div class="name">工作经历</div>
                    <div class="fontclass">.i-gongzuojingli</div>
                </li>
            
                <li>
                <i class="icon iconfont i-lianxifangshi"></i>
                    <div class="name">联系方式</div>
                    <div class="fontclass">.i-lianxifangshi</div>
                </li>
            
                <li>
                <i class="icon iconfont i-peixunjingli"></i>
                    <div class="name">培训经历</div>
                    <div class="fontclass">.i-peixunjingli</div>
                </li>
            
                <li>
                <i class="icon iconfont i-wodezhengshu1"></i>
                    <div class="name">我的证书</div>
                    <div class="fontclass">.i-wodezhengshu1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-right2"></i>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">.i-arrow-right2</div>
                </li>
            
                <li>
                <i class="icon iconfont i-arrow-left1"></i>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">.i-arrow-left1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-enclosure"></i>
                    <div class="name">enclosure</div>
                    <div class="fontclass">.i-enclosure</div>
                </li>
            
                <li>
                <i class="icon iconfont i-video"></i>
                    <div class="name">video</div>
                    <div class="fontclass">.i-video</div>
                </li>
            
                <li>
                <i class="icon iconfont i-link"></i>
                    <div class="name">link</div>
                    <div class="fontclass">.i-link</div>
                </li>
            
                <li>
                <i class="icon iconfont i-audio"></i>
                    <div class="name">audio</div>
                    <div class="fontclass">.i-audio</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-questionn"></i>
                    <div class="name">management-questionn</div>
                    <div class="fontclass">.i-management-questionn</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-courseobj"></i>
                    <div class="name">management-courseobj</div>
                    <div class="fontclass">.i-management-courseobj</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-test"></i>
                    <div class="name">management-test</div>
                    <div class="fontclass">.i-management-test</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-QA"></i>
                    <div class="name">management-QA</div>
                    <div class="fontclass">.i-management-QA</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-achieveme"></i>
                    <div class="name">management-achieveme</div>
                    <div class="fontclass">.i-management-achieveme</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-team"></i>
                    <div class="name">management-team</div>
                    <div class="fontclass">.i-management-team</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-teaching"></i>
                    <div class="name">management-teaching</div>
                    <div class="fontclass">.i-management-teaching</div>
                </li>
            
                <li>
                <i class="icon iconfont i-management-student"></i>
                    <div class="name">management-student</div>
                    <div class="fontclass">.i-management-student</div>
                </li>
            
                <li>
                <i class="icon iconfont i-refresh"></i>
                    <div class="name">refresh</div>
                    <div class="fontclass">.i-refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont i-wechat"></i>
                    <div class="name">wechat</div>
                    <div class="fontclass">.i-wechat</div>
                </li>
            
                <li>
                <i class="icon iconfont i-hot"></i>
                    <div class="name">hot</div>
                    <div class="fontclass">.i-hot</div>
                </li>
            
                <li>
                <i class="icon iconfont i-kuxiao"></i>
                    <div class="name">kuxiao</div>
                    <div class="fontclass">.i-kuxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont i-operation-center"></i>
                    <div class="name">operation-center</div>
                    <div class="fontclass">.i-operation-center</div>
                </li>
            
                <li>
                <i class="icon iconfont i-course-transfer"></i>
                    <div class="name">course-transfer</div>
                    <div class="fontclass">.i-course-transfer</div>
                </li>
            
                <li>
                <i class="icon iconfont i-unpass1"></i>
                    <div class="name">unpass</div>
                    <div class="fontclass">.i-unpass1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-account_set"></i>
                    <div class="name">account_set</div>
                    <div class="fontclass">.i-account_set</div>
                </li>
            
                <li>
                <i class="icon iconfont i-personal_ifo"></i>
                    <div class="name"> personal_ifo</div>
                    <div class="fontclass">.i-personal_ifo</div>
                </li>
            
                <li>
                <i class="icon iconfont i-help"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.i-help</div>
                </li>
            
                <li>
                <i class="icon iconfont i-agency_cer"></i>
                    <div class="name">agency_cer</div>
                    <div class="fontclass">.i-agency_cer</div>
                </li>
            
                <li>
                <i class="icon iconfont i-safetywarning"></i>
                    <div class="name">i-safetywarning</div>
                    <div class="fontclass">.i-safetywarning</div>
                </li>
            
                <li>
                <i class="icon iconfont i-download"></i>
                    <div class="name">download</div>
                    <div class="fontclass">.i-download</div>
                </li>
            
                <li>
                <i class="icon iconfont i-tradingcenter"></i>
                    <div class="name">tradingcenter</div>
                    <div class="fontclass">.i-tradingcenter</div>
                </li>
            
                <li>
                <i class="icon iconfont i-question_answer"></i>
                    <div class="name">question_answer</div>
                    <div class="fontclass">.i-question_answer</div>
                </li>
            
                <li>
                <i class="icon iconfont i-fuwurexian"></i>
                    <div class="name">  hotline</div>
                    <div class="fontclass">.i-fuwurexian</div>
                </li>
            
                <li>
                <i class="icon iconfont i-rightbar-phone"></i>
                    <div class="name">rightbar-phone</div>
                    <div class="fontclass">.i-rightbar-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont i-rightbar-contacts"></i>
                    <div class="name">rightbar-contacts</div>
                    <div class="fontclass">.i-rightbar-contacts</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-Correctin"></i>
                    <div class="name">evaluating-Correctin</div>
                    <div class="fontclass">.i-evaluating-Correctin</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-none"></i>
                    <div class="name">evaluating-none</div>
                    <div class="fontclass">.i-evaluating-none</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-time"></i>
                    <div class="name">evaluating-time</div>
                    <div class="fontclass">.i-evaluating-time</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-Fraction"></i>
                    <div class="name">evaluating-Fraction</div>
                    <div class="fontclass">.i-evaluating-Fraction</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-number"></i>
                    <div class="name">evaluating-number</div>
                    <div class="fontclass">.i-evaluating-number</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-phone"></i>
                    <div class="name">evaluating-phone</div>
                    <div class="fontclass">.i-evaluating-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-man"></i>
                    <div class="name">evaluating-man</div>
                    <div class="fontclass">.i-evaluating-man</div>
                </li>
            
                <li>
                <i class="icon iconfont i-face"></i>
                    <div class="name">evaluating-emotion</div>
                    <div class="fontclass">.i-face</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shanchu"></i>
                    <div class="name">evaluating-delete</div>
                    <div class="fontclass">.i-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont i-bianji"></i>
                    <div class="name">evaluating-editor</div>
                    <div class="fontclass">.i-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont i-feed-back"></i>
                    <div class="name">feed-back</div>
                    <div class="fontclass">.i-feed-back</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluate-star"></i>
                    <div class="name">evaluate-star</div>
                    <div class="fontclass">.i-evaluate-star</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-career"></i>
                    <div class="name">icon- career</div>
                    <div class="fontclass">.i-icon-career</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-help"></i>
                    <div class="name">icon-help</div>
                    <div class="fontclass">.i-icon-help</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yunhanggaikuang-normal"></i>
                    <div class="name">运行概况-normal</div>
                    <div class="fontclass">.i-yunhanggaikuang-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yunhanggaikuang-selected"></i>
                    <div class="name">运行概况-selected</div>
                    <div class="fontclass">.i-yunhanggaikuang-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-renzhengguanli-selected"></i>
                    <div class="name">认证管理-selected</div>
                    <div class="fontclass">.i-renzhengguanli-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-renzhengguanli-normal"></i>
                    <div class="name">认证管理-normal</div>
                    <div class="fontclass">.i-renzhengguanli-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shenheguanli-selected"></i>
                    <div class="name">审核管理-selected</div>
                    <div class="fontclass">.i-shenheguanli-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shenheguanli-normal"></i>
                    <div class="name">审核管理-normal</div>
                    <div class="fontclass">.i-shenheguanli-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zhanghaoguanli-selected"></i>
                    <div class="name">账号管理-selected</div>
                    <div class="fontclass">.i-zhanghaoguanli-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zhanghaoguanli-normal"></i>
                    <div class="name">账号管理-normal</div>
                    <div class="fontclass">.i-zhanghaoguanli-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-jubaoguanli-normal"></i>
                    <div class="name">举报管理-normal</div>
                    <div class="fontclass">.i-jubaoguanli-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-jubaoguanli-selected"></i>
                    <div class="name">举报管理-selected</div>
                    <div class="fontclass">.i-jubaoguanli-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yunyingguanli-normal"></i>
                    <div class="name">运营管理-normal</div>
                    <div class="fontclass">.i-yunyingguanli-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yunyingguanli-selected"></i>
                    <div class="name">运营管理-selected</div>
                    <div class="fontclass">.i-yunyingguanli-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shuangxuanhui-normal"></i>
                    <div class="name">双选会-normal</div>
                    <div class="fontclass">.i-shuangxuanhui-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont i-shuangxuanhui-selected"></i>
                    <div class="name">双选会-selected</div>
                    <div class="fontclass">.i-shuangxuanhui-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont i-up"></i>
                    <div class="name">up</div>
                    <div class="fontclass">.i-up</div>
                </li>
            
                <li>
                <i class="icon iconfont i-down"></i>
                    <div class="name">down</div>
                    <div class="fontclass">.i-down</div>
                </li>
            
                <li>
                <i class="icon iconfont i-reduce"></i>
                    <div class="name">reduce</div>
                    <div class="fontclass">.i-reduce</div>
                </li>
            
                <li>
                <i class="icon iconfont i-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.i-add</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-right"></i>
                    <div class="name">evaluating-right</div>
                    <div class="fontclass">.i-evaluating-right</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-wrong"></i>
                    <div class="name">evaluating-wrong</div>
                    <div class="fontclass">.i-evaluating-wrong</div>
                </li>
            
                <li>
                <i class="icon iconfont i-evaluating-undo"></i>
                    <div class="name">evaluating-undo</div>
                    <div class="fontclass">.i-evaluating-undo</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yiban-line"></i>
                    <div class="name">yiban-line</div>
                    <div class="fontclass">.i-yiban-line</div>
                </li>
            
                <li>
                <i class="icon iconfont i-cai-line"></i>
                    <div class="name">cai-line</div>
                    <div class="fontclass">.i-cai-line</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zan-line"></i>
                    <div class="name">zan-line</div>
                    <div class="fontclass">.i-zan-line</div>
                </li>
            
                <li>
                <i class="icon iconfont i-yiban-fill"></i>
                    <div class="name">yiban-fill</div>
                    <div class="fontclass">.i-yiban-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont i-cai-fill"></i>
                    <div class="name">cai-fill</div>
                    <div class="fontclass">.i-cai-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont i-zan-fill"></i>
                    <div class="name">zan-fill</div>
                    <div class="fontclass">.i-zan-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-test"></i>
                    <div class="name">warning</div>
                    <div class="fontclass">.i-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-test1"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.i-icon-test1</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-test2"></i>
                    <div class="name">error</div>
                    <div class="fontclass">.i-icon-test2</div>
                </li>
            
                <li>
                <i class="icon iconfont i-icon-test3"></i>
                    <div class="name">success</div>
                    <div class="fontclass">.i-icon-test3</div>
                </li>
            
                <li>
                <i class="icon iconfont i-date"></i>
                    <div class="name">date</div>
                    <div class="fontclass">.i-date</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">i-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
